<template>
    <div class="dialog">
        <el-dialog
            title="导出刊播照片"
            :model-value="modelValue"
            width="480px"
            custom-class="batch-point"
            class="title"
            @closed="handleClose"
        >
            <h3 class="batch-title">拍照要求</h3>
            <div class="batch-box">
                <el-select v-model="photoType" class="m-2" placeholder="Select" size="large">
                    <el-option label="上刊" value="001" />
                    <el-option label="下刊" value="002" />
                </el-select>
            </div>

            <h3 class="batch-title">清晰度</h3>
            <div class="batch-box">
                <el-select v-model="clarity" class="m-2" placeholder="Select" size="large">
                    <el-option label="普通" value="001" />
                    <el-option label="高清" value="002" />
                    <el-option label="超清" value="003" />
                </el-select>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="submitLoading" @click="submit"> 导出 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, inject } from 'vue';
import { downLoadCommon } from '@/utils/common';
import DownLoadMgr from '@/utils/DownLoadMgr';
import { exportPublishPhoto } from '@/api/point';
import { ElMessage } from 'element-plus';

const emits = defineEmits<{(e: 'update:modelValue', visible: boolean): void }>();
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    planData: {
        type: Object,
        default: () => {
            return {};
        },
    },
});

const photoType = ref('001');
const clarity = ref('001');

const submitLoading = ref(false);
const handleClose = () => {
    emits('update:modelValue', false);
};

const getDate = (n: number | string): string | number => {
    let now = new Date(n),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
};

const submit = async () => {
    submitLoading.value = true;
    try {
        console.log(props.planData);
        let resCheckUrl = await exportPublishPhoto({
            saleProgramId: props.planData.planId,
            imgType: photoType.value,
            ossStyle: clarity.value,
            beginTime: getDate(props.planData!.beginTime),
        });
        ElMessage.success('资源正在后台下载中...');
        console.log(resCheckUrl);
        // const { loadState, realResUrl, fileName } = await $http.get(res);
        // 1. res 是一个下载检测接口地址
        // 2. loadState = 0  realResUrl='' fileName='' 服务端资源还未生成好
        // 3. loadState = 1  realResUrl='xxx' fileName='xxx' 服务端资源已经生成好
        // 4. DownLoadMgr 是一个定时检测并下载该资源的管理器
        DownLoadMgr.Instance.download(resCheckUrl);
    } catch (e) {
        console.log('e', e);
    } finally {
        submitLoading.value = false;
        handleClose();
    }
};
</script>

<style lang="scss" scoped>
.dialog {
    ::v-deep .el-dialog__title {
        font-weight: 700;
    }
}

.batch-point {
    .batch-title {
        font-weight: 400;
        font-size: 14px;
        color: #252525;
        letter-spacing: 0;
        text-align: left;
        line-height: 18px;
        margin-bottom: 11px;
    }

    .batch-box {
        margin-bottom: 20px;
    }
}
</style>
